import * as React from 'react';
import { hashHistory } from 'react-router';
import { observer } from 'mobx-react'
import { RouteComponentProps } from 'react-router';
import { Form, Button, Input, Checkbox, Modal, Icon, message } from 'antd';
import { LoginModel } from '../model/LoginModel';

const FormItem = Form.Item;

@observer
export class Login extends React.Component<RouteComponentProps<{}, {}>, {}> {

    state = {
        store: new LoginModel(),
        modalVisible: false
    };

    private login = () => {
        this.state.store.submit().then(res => {
            const { location } = this.props;
            if (location.state && location.state.nextPathname) {
                this.props.router.replace(location.state.nextPathname)
            } else {
                this.props.router.replace('/content')
            }
        }, res => {
            message.error(res.message, 2.5);
        });
    };

    private showModal = () => {
        this.setState({modalVisible: true})
    };

    private dismissModal = () => {
        this.setState({ modalVisible: false });
    };

    render() {
        const note = '忘记密码 或者 申请开通帐号，请发邮件联系管理员。\n管理员邮箱：liangx@winhe.cn';
        const {store} = this.state;

        return <div>
            <div className="login-page-header">
                <h1>
                    <img src="/assets/img/logo.png"/>
                    <span className="logo-text">私享圈  媒体后台</span>
                </h1>
            </div>
            <div className="login-page">
                <Form>
                    <FormItem>
                        <Input addonBefore={<Icon type="user" />}
                               type="text"
                               placeholder="用户名/邮箱"
                               value={store.login}
                               onChange={(e) => store.login = e.target['value']}/>
                    </FormItem>
                    <FormItem>
                        <Input addonBefore={<Icon type="lock" />}
                               type="password"
                               placeholder="密码"
                               value={store.password}
                               onChange={(e) => store.password = e.target['value']}/>
                    </FormItem>

                    <FormItem>
                        <Checkbox checked={store.rememberMe}
                                  onChange={(e) => store.rememberMe = e.target['checked']}>记住账号</Checkbox>
                        <a className="login-form-forgot" onClick={this.showModal}>无法登录</a>

                        <Modal title="无法登录"
                               visible={this.state.modalVisible}
                               onOk={this.dismissModal} onCancel={this.dismissModal}
                               footer={[<Button key="back" size="large" onClick={this.dismissModal}>知道了</Button>]}>
                            <p>忘记密码 或者 申请开通账号，请发邮件联系管理员</p>
                            <p>管理员邮箱：<a href="mailto:liangx@winhe.cn">liangx@winhe.cn</a></p>
                            <p>有其他问题，可联系客服QQ：331793984</p>
                        </Modal>

                        <Button size="large"
                                type="primary"
                                className="login-form-button"
                                onClick={this.login}>登录</Button>
                    </FormItem>
                </Form>
            </div>
            <div className="login-page-footer">
                <p>私享圈、圈子独享 | 咨询qq: 331793984</p>
                <p>Copyright © 2017 商赢宝 . All Rights Reserved.     网站备案号：粤ICP备14016892号-3</p>
            </div>
        </div>;
    }
}
